<template>
  <div>
    <div class="page__main">
      <div class="page__scroller">
        <div class="building">
          <div>正在建设中，敬请期待...</div>
        </div>
        <!--<slot v-for="item in functionsList">-->
          <!--<div class="title">{{item.title}}</div>-->
          <!--<div class="functions">-->
            <!--<div class="functions__item" :class="'functions__item-' + subItem.icon" v-for="subItem in item.list">-->
              <!--{{subItem.text}}-->
            <!--</div>-->
          <!--</div>-->
        <!--</slot>-->
      </div>
    </div>
    <Footer active="Special"></Footer>
  </div>
</template>

<script>
  import Footer from '@/components/Footer'
  export default {
    components:{
      Footer,
    },
    data() {
      return {
        functionsList: [
          {
            title: '管理提升',
            list: [
              {text: '管理规范', icon: 'manageRule'},
              {text: '运营有效', icon: 'operate'},
            ]
          },
          {
            title: '基础能力提升',
            list: [
              {text: '建设类', icon: 'construction'},
              {text: '维护类', icon: 'maintain'},
              {text: '财务类', icon: 'finance'},
              {text: '市场类', icon: 'market'},
            ]
          },
          {
            title: '综合评价分析',
            list: [
              {text: '业务发展', icon: 'businessDevelop'},
              {text: '客户服务', icon: 'customerService'},
              {text: '投资管理', icon: 'investmentManage'},
              {text: '资产管理', icon: 'assetManage'},
              {text: '经营绩效', icon: 'businessPerformance'},
              {text: '风险管理', icon: 'riskManage'}
            ]
          },
          {
            title: '单站核算',
            list: [
              {text: '单站效益', icon: 'stationPerformance'},
              {text: '投资效益', icon: 'investmentReturns'},
              {text: '站址成本', icon: 'stationCost'},
              {text: '站址投资', icon: 'stationInvestment'},
              {text: '收支配比', icon: 'incomeExpend'},
              {text: '数据质量', icon: 'dataQuality'}
            ]
          },
          {
            title: '风险在线',
            list: [
              {text: '收入领域', icon: 'incomeArea'},
              {text: '建设领域', icon: 'buildArea'},
              {text: '维护管理', icon: 'maintainManage'},
              {text: '场地租金', icon: 'siteRent'},
              {text: '场地电费', icon: 'siteElectricity'},
              {text: '仓储管理', icon: 'storageManage'}
            ],
          }
        ],
      }
    }
  }
</script>

<style lang="scss" scoped>
  .functions {
    padding: 6px 8px;
    background: #fff;
    overflow: hidden;
    
    &__item {
      float: left;
      width: 25%;
      padding: 6px 0;
      text-align: center;
      
      &::before {
        content: "";
        display: block;
        margin: 0 auto 4px;
        width: 46px;
        height: 46px;
        background-size: 100% 100%;
      }
    }
  }

  @each $icon in manageRule, operate,
    construction, maintain, finance, market,
    businessDevelop, customerService, investmentManage, assetManage, businessPerformance, riskManage,
    stationPerformance, investmentReturns, stationCost, stationInvestment, incomeExpend, dataQuality,
    incomeArea, buildArea, maintainManage, siteRent, siteElectricity, storageManage {
    .functions__item-#{$icon}::before {
      background-image: url(~@/assets/images/special/icon-#{$icon}.png);
    }
  }
</style>
